import { request, getFullImageUrl, initBaseUrl } from '../../utils/request';
import BackButton from '@/components/common/BackButton.vue';

export default {
  components: {
    BackButton
  },
  data() {
    return {
      messages: [], // 聊天消息列表
      inputMessage: '', // 输入框消息
      myAvatar: '', // 我的头像
      roomId: '', // 群聊房间ID
      roomName: '', // 群聊房间名称
      jobId: '', // 兼职任务ID
      scrollToView: '',
      windowHeight: 0
    };
  },
  async onLoad(options) {
    try {
      console.log('进入群聊页面', options);
      uni.showToast({title: '群聊页面加载中', icon: 'loading', duration: 1000});
      
      if (!options) {
        console.error('options参数不存在');
        uni.showToast({ title: '页面参数错误', icon: 'error' });
        return;
      }
      
      // 获取页面参数
      this.roomId = options.room_id || '';
      this.jobId = options.jobId || '';
      
      await initBaseUrl();
      
      // 调用getGroupRoom方法获取群聊标题
      if (this.jobId) {
        const roomInfo = await this.getGroupRoomInfo();
        if (roomInfo) {
          this.roomName = roomInfo.name || '群聊';
        }
      } else {
        this.roomName = decodeURIComponent(options.roomName) || '群聊';
      }
      
      await this.getGroupChatHistory();
      this.listenWebSocketMessage();
      
      uni.getSystemInfo({
        success: (res) => {
          this.windowHeight = res.windowHeight - 200;
        },
        fail: (err) => {
          console.error('获取系统信息失败:', err);
          this.windowHeight = 500; // 设置默认高度
        }
      });
    } catch (error) {
      console.error('onLoad执行异常:', error);
      uni.showToast({
        title: '页面加载失败',
        icon: 'none'
      });
    }
  },
  watch: {
    // 监听消息数组变化，自动滚动到底部
    messages: {
      handler() {
        this.$nextTick(() => {
          // 设置滚动到最新消息的id
          this.scrollToView = 'message' + (this.messages.length - 1);
        });
      },
      deep: true
    }
  },
  methods: {
    // 新增方法：获取群聊房间信息
    async getGroupRoomInfo() {
      try {
        const res = await request({
          url: `chat/getGroupRoom?job_id=${this.jobId}`,
          method: 'GET'
        });
        
        if (res.code === 0) {
          return res.data;
        } else {
          console.error('获取群聊房间信息失败:', res.msg);
          return null;
        }
      } catch (error) {
        console.error('获取群聊房间信息异常:', error);
        return null;
      }
    },
    // 获取群聊历史记录
    async getGroupChatHistory() {
      try {
        const res = await request({
          url: `chat/getGroupMessageList?room_id=${this.roomId}&page=1&limit=50`,
          method: 'GET'
        });

        if (res.code === 0) {
          this.messages = res.data.map(msg => ({
            ...msg,
            isMine: msg.sender_id === uni.getStorageSync('uid'),
            time: msg.create_time // 直接使用后端格式化后的时间
          }));
          // 调用已读接口重置未读计数
          await this.markGroupMessageAsRead();
        }
      } catch (error) {
        console.error('获取群聊历史失败:', error);
        uni.showToast({
          title: '获取聊天记录失败',
          icon: 'none'
        });
      }
    },

    // 标记群聊消息为已读
    async markGroupMessageAsRead() {
      try {
        await request({
          url: `Myjobs/readGroupMessage`,
          method: 'POST',
          data: {
            room_id: this.roomId
          }
        });
        console.log('群聊消息已标记为已读');
      } catch (error) {
        console.error('标记群聊消息为已读失败:', error);
      }
    },
    listenWebSocketMessage() {
      // 只移除当前组件的监听器，而不是所有
      uni.$off('websocket-message', this.handleWebSocketMessage.bind(this));
      // 注册具名函数作为监听器
      uni.$on('websocket-message', this.handleWebSocketMessage.bind(this));
    },
    // 监听WebSocket消息
    handleWebSocketMessage(message) {
      console.log('收到群聊消息:', message);
        try {
          // 检查消息是否为空或不是JSON格式
          if (!message || typeof message !== 'string' ||
              (message.charAt(0) !== '{' && message.charAt(0) !== '[')) {
            console.error('接收到无效的JSON消息:', message);
            return;
          }

          const parsedMsg = JSON.parse(message);
        
          if (parsedMsg.type === 'group_chat' && parsedMsg.roomId == this.roomId) {
            // 添加消息到列表
            console.log('parsedMsg',parsedMsg);
            const isMyMessage = parsedMsg.sender_id === uni.getStorageSync('uid');
            this.messages.push({
                content: parsedMsg.content,
                sender_id: parsedMsg.sender_id,
                isMine: isMyMessage,
                time: parsedMsg.create_time || new Date().toLocaleString(), // 使用后端返回的时间或当前时间
                sender_avatar: parsedMsg.sender_avatar
              });
          }
        } catch (error) {
          console.error('解析WebSocket消息失败:', error, '消息内容:', message);
        }
    },
    
    // 发送群聊消息
    sendMessage() {
      if (!this.inputMessage.trim()) return;

      request({
        url: 'chat/sendGroupMessage',
        method: 'POST',
        data: {
          room_id: this.roomId,
          content: this.inputMessage
        }
      }).then(res => {
        if (res.code === 0) {
          // 添加到本地消息列表 - 使用接口返回的数据
      
          // 清空输入框
          this.inputMessage = '';

          this.$nextTick(() => {
            this.scrollToView = 'message' + (this.messages.length - 1);
          });
        } else {
          uni.showToast({
            title: '消息发送失败',
            icon: 'none'
          });
        }
      }).catch(error => {
        console.error('发送消息失败:', error);
        uni.showToast({
          title: '消息发送失败',
          icon: 'none'
        });
      });
    },
    
    showEmoji() {
      // 显示表情选择器
      console.log('显示表情选择器');
    }
  }
}